<template>
  <el-dialog
    maxHeight="null"
    width="990px"
    title="选择物资合同清单"
    :visible.sync="dialogTableVisibleTextarea"
    custom-class="revenue-code-number"
    v-if="dialogTableVisibleTextarea"
  >
    <div class="el-dialog__body-bodys">
      <div class="bodys-left">
        <div class="bodys-left-header">
          <el-search
            :formProp="formSearch"
            @search="formSearchHandler"
            @change="formSearchChange"
            width="380px"
            placement="bottom-start"
          >
            <template slot="search">
              <el-input
                v-model="formSearch.materialsCode"
                clearable
                searchLabel="清单编码"
                placeholder="请输入内容"
              ></el-input>
              <el-input
                v-model="formSearch.materialsName"
                clearable
                searchLabel="清单名称"
                placeholder="请输入内容"
              ></el-input>
            </template>
          </el-search>
        </div>
        <el-table
          :data="tableDataDialogLeft"
          maxHeight="380"
          ref="multipleTable"
          :lineClamp="lineClampBody"
          style="width: 484px"
          @select="handleSelect"
          @select-all="handleSelectAll"
          :row-key="getRowKey"
        >
          <!--            <template slot-scope="scope">-->
          <!--                -->
          <!--            </template>-->
          <el-table-column type="selection" width="55" />
          <!-- :selectable="selectableHandle"
                      :reserve-selection="true" -->
          <el-table-column prop="materialsCode" label="清单编码" />
          <el-table-column prop="materialsName" label="清单名称" />
        </el-table>
        <div class="ccui-table-footer" v-show="isShowPagination">
          <div id="ccui-paging">
            <el-pagination
              :total="total"
              :page-size="pageSizeCode"
              :current-page="pageNoCode"
              :page-sizes="[10, 20, 50, 100, 200, 500]"
              background
              layout="total, sizes, prev, pager, next, jumper"
              popper-class="ccui-paging-page-size-popper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
            <el-button
              class="ccui-pagination-btn"
              size="mini"
              type="default"
              @click="handleSizeChange('none')"
              >确定
            </el-button>
          </div>
        </div>
      </div>
      <div class="bodys-right">
        <div class="bodys-right-header">
          已选择({{ tableDataDialogRight.length }}个)
        </div>
        <el-table
          :data="tableDataDialogRight"
          ref="multipleTable2"
          maxHeight="380"
          :lineClamp="lineClampBody"
          style="width: 484px"
        >
          <el-table-column prop="materialsCode" label="清单编码" />
          <el-table-column prop="materialsName" label="清单名称" />
          <el-table-column label="操作" width="84">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="deleteTable(scope.row)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" type="default-mini" @click="reset"
        >取 消
      </el-button>
      <el-button size="mini" type="primary-font-mini" @click="getSure"
        >确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getSmpPcConcMatListById } from "../api/orderEntry";

export default {
  name: "contractDialog",
  props: {
    concId: {
      type: Number,
      default: () => null
    },
    clearTableList: {
      type: Number,
      default: () => null
    }
  },
  //    //  getConfirmPostId: Number
  //   },
  watch: {
    clearTableList(item) {
      this.tableDataDialogLeft = [];
    },
    concId(item) {
      if (item) {
        this.getSmpPcConcMatListById(item);
      }
    }

    //  dialogTableVisibleTextarea(item) {
    //    if (item) {
    //      this.$nextTick(() => {
    //        this.dialogTableVisibleTextareaData = JSON.parse(
    //          JSON.stringify(this.tableDataDialogRight)
    //        )
    //        if (this.$refs.multipleTable === undefined) return
    //        this.$refs.multipleTable.clearSelection()
    //        this.tableDataDialogRight = []
    //        //  this.tableDataDialogRight.map((e) => {
    //        //    this.tableDataDialogLeft.map((i) => {
    //        //      if (i.materialsCode === e.materialsCode) {
    //        //        this.$refs.multipleTable.toggleRowSelection(i, true)
    //        //      }
    //        //    })
    //        //  })
    //      })
    //    }
    //  },
    //  getConfirmPostId(item) {
    //    if (item) {
    //      this.listPageApprovePassSubList();
    //    }
    //  }
  },
  data() {
    return {
      contractCode: "",
      dialogTableVisibleTextarea: false,
      formSearch: {
        concId: "",
        materialsCode: "",
        materialsName: ""
      },
      lineClampBody: true,
      tableDataDialogLeft: [],
      tableDataDialogRight: [],
      dialogTableVisibleTextareaData: [],
      // 分页相关
      isShowPagination: false,
      total: 0,
      pageNoCode: 1,
      pageSizeCode: 10
    };
  },
  methods: {
    getSmpPcConcMatListById(id) {
      this.formSearch.concId = id;
      getSmpPcConcMatListById(this.formSearch).then(res => {
        // let result = res.data.data;
        let result = res.data.data;
        result.map(e => {
          if (e.deliveryTime) {
            e.deliveryTime = e.deliveryTime.substr(0, 10);
          }
          e.only = this.generateUUID();
          e.listAddress =
            e.deliveryAreaName +
            e.provinceName +
            e.cityName +
            e.countyName +
            e.deliveryPoints;
          e.isOtherFlag = true;
          return e;
        });
        this.tableDataDialogLeft = result;
      });
    },
    //  selectableHandle(row) {
    //    if (row.currentNoSettlement === '0') return false
    //    return true
    //  },
    reset() {
      this.dialogTableVisibleTextarea = false;
      // this.$emit('update:tableData', this.dialogTableVisibleTextareaData)
    },
    getRowKey(row) {
      return row.tPcConcSubListId;
    },
    // 单选
    handleSelect(selection, row) {
      this.tableDataDialogRight = selection;
    },
    // 全选
    handleSelectAll(selection) {
      this.tableDataDialogRight = selection;
    },
    // 确定
    getSure() {
      console.log("确认合同", this.tableDataDialogRight);
      this.$emit("getDialogRight", this.tableDataDialogRight);
      this.$refs.multipleTable.clearSelection();
      this.tableDataDialogRight = [];
    },
    // 删除
    deleteTable(r) {
      // 删除右侧数据
      // 右侧删除, 通过过滤改变左侧选中状态
      console.log("删除选中的行", r);
      this.tableDataDialogRight = this.tableDataDialogRight.filter(
        e => e.materialsCode !== r.materialsCode
      );
      let a = this.tableDataDialogLeft.filter(
        item => item.materialsCode === r.materialsCode
      );
      this.$nextTick(() => {
        this.$refs.multipleTable.toggleRowSelection(a[0], false);
      });
    },
    generateUUID() {
      var d = new Date().getTime();
      var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function(c) {
          var r = (d + Math.random() * 16) % 16 | 0;
          d = Math.floor(d / 16);
          return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
        }
      );
      return uuid;
    },
    // 高级搜索
    formSearchHandler() {
      this.getSmpPcConcMatListById(this.concId);
    },
    formSearchChange() {
      this.formSearch.materialsCode = "";
      this.formSearch.materialsName = "";
    },
    // 显示条数更改
    handleSizeChange(val) {
      this.pageNoCode = 1;
      if (val != "none") {
        this.pageSizeCode = val;
      }
      this.getSmpPcConcMatListById(this.concId);
    },
    // 当前页码更改
    handleCurrentChange(val) {
      // 跳转翻页都会调这个方法
      this.pageNoCode = val;
      this.getSmpPcConcMatListById(this.concId);
    }
  }
};
</script>

<style scoped></style>
